<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js增加按钮</title>
</head>
<body>
<div id="div-id">
    <!-- 全部展开/收起按钮 -->
    <p>
        <button id="global-expand">全部展开</button>
        <button id="global-collapse">全部收起</button>
    </p>

    <ul class="sectlevel1">
        <li>1. 页面目录
            <ul class="sectlevel2">
                <li>1.1.用户获取请求
                    <ul class="sectlevel3">
                        <li>1.1.1. 请求curl</li>
                        <li>1.1.2. 请求curl</li>
                    </ul>
                    <!-- 展开/收起图标 -->
                    <span class="toggle-icon"><img src="up.svg"></span>
                </li>
            </ul>
            <!-- 展开/收起图标 -->
            <span class="toggle-icon"><img src="down.svg"></span>
        </li>
        <li>2. 这是标题</li>
        <li>3. 通用返回对象</li>
        <li>4. 用户测试
            <ul class="sectlevel2">
                <li>4.1. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.1.1. 请求curl</li>
                        <li>4.1.2. 请求curl</li>
                    </ul>
                    <!-- 展开/收起图标 -->
                    <span class="toggle-icon"><img src="up.svg"></span>
                </li>
                <li>4.2. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.2.1. 请求curl</li>
                        <li>4.2.2. 请求curl</li>
                    </ul>
                    <!-- 展开/收起图标 -->
                    <span class="toggle-icon"><img src="up.svg"></span>
                </li>
            </ul>
            <!-- 展开/收起图标 -->
            <span class="toggle-icon"><img src="down.svg"></span>
        </li>
    </ul>
</div>

<script>
    const menuId = "div-id";
    window.onload = function () {
        const catalog = document.getElementById(menuId);
        console.log(catalog)

        // 修改后的 addEvent 函数，不再动态创建元素，而是查找已存在的元素
        function addEvent(o) {
            const toggleIcon = o.querySelector('.toggle-icon > img');
            toggleIcon.onclick = function (e) {
                const theEvent = window.event || e;
                const link = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
                const icon = link;
                const targetList = link.closest('li').querySelector('ul');
                let isExpanded = (icon.src === 'down.svg');

                if (isExpanded) {
                    icon.src = 'up.svg';
                    targetList.style.display = "none";
                } else {
                    icon.src = 'down.svg';
                    targetList.style.display = "block";
                }
            };
        }

        // 修改后的 addGlobBt 函数，不再动态创建元素，而是查找已存在的元素
        function addGlobBt(catalog) {
            const expandBtn = document.getElementById("global-expand");
            const collapseBtn = document.getElementById("global-collapse");

            collapseBtn.addEventListener('click', function () {
                const nonTopLevelLists = document.querySelectorAll('#div-id ul:not(.sectlevel1)');
                nonTopLevelLists.forEach(list => {
                    list.style.display = "none";
                    list.previousElementSibling.querySelector('.toggle-icon > img').src = 'up.svg';
                });
            });

            expandBtn.addEventListener('click', function () {
                const nonTopLevelLists = document.querySelectorAll('#div-id ul:not(.sectlevel1)');
                nonTopLevelLists.forEach(list => {
                    list.style.display = "block";
                    list.previousElementSibling.querySelector('.toggle-icon > img').src = 'down.svg';
                });
            });
        }

        // 遍历并处理列表项
        const listItems = document.querySelectorAll('#div-id li');
        listItems.forEach(addEvent);

        // 添加全局展开/收起按钮的事件监听器
        addGlobBt(catalog);
    }
</script>
</html>